<!--  -->
<template>
  <div class='padding20'>
    <div style="margin-bottom:10px">
      <!-- <el-page-header @back='$router.push(originPath)' content=''></el-page-header> -->
      <el-button type="primary" @click="$router.push(originPath)">返回</el-button>
    </div>
   <!--  <div style='cursor:pointer; display:flex;margin-bottom:10px;align-items:center;' v-for='it in list' :key='it.id'>
      <div style="width:200px">
        {{it.fileName}}
      </div>
      <div style="width:50px">
        <i class="el-icon-download iconOperate" style="" @click='downLoadFile(it)'></i>
      </div>
      <div style="flex:1">
        <div v-show='it.checkState == 0'>
          <el-button size='small' type="success" @click='fileCheck(1, it)'>通过</el-button>
          <el-button size='small' type="danger" @click="fileCheck(2,it)"> 驳回</el-button>
        </div>
        <el-button size='small' type="success" v-if='it.checkState == 1' plain>已通过</el-button>
        <el-button size='small' type="danger" v-if='it.checkState == 2' plain>已驳回</el-button>
      </div>
    </div>
    <el-pagination class="pageBar" background @size-change="sizeChange" @current-change="currentChange" :current-page="pageInfo.current" :page-sizes="[2, 5,10, 20, 30]" :page-size="pageInfo.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
    <div class="table">
                <el-table
                        border
                        show-header
                        stripe
                        size="mini"
                        :data="list"
                        highlight-current-row ref="sysLogTable"
                        :row-class-name="rowClassName">
                    <el-table-column label="序号" width="60" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.$index+(pageInfo.current - 1) * pageInfo.size + 1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="fileName" label="内容名称" align="center" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="checkState" label="审核状态" align="center" show-overflow-tooltip>
                      <template slot-scope="scope" >
                            <span type="text" size="small" >{{scope.row.checkState == '0' ? '待审核' : scope.row.checkState == '1' ?  '已通过' : scope.row.checkState == '2' ? '已驳回' :''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button  type="text" icon="el-icon-download" @click="downLoadFile(scope.row)">下载</el-button>
                            <el-button  type="text" icon="el-icon-check" v-show="scope.row.checkState == '0'" @click="fileCheck(1, scope.row)">通过</el-button>
                            <el-button  type="text" icon="el-icon-close"  v-show="scope.row.checkState == '0'" @click="fileCheck(2, scope.row)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-row type="flex" justify="end" v-show="pageInfo.total>0">
                    <el-pagination
                            class="pageBar"
                            :style="{float: 'right', padding: '20px'}"
                            background
                            @size-change="sizeChangeFn"
                            @current-change="currentChangeFn"
                            :current-page="pageInfo.current"
                            :page-sizes="[10, 20, 50, 100]"
                            :page-size="pageInfo.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageInfo.total">
                    </el-pagination>
                </el-row>
            </div>
  </div>
</template>

<script>
import operateApi from "../api/operate.service.js";
import teacherApi from "../api/teacher.service.js";

export default {
  components: {},
  data() {
    return {
      originPath: "",
      courseId: "",
      pageInfo: {
        current: 1,
        size: 10,
      },
      list: [],
    };
  },
  mounted() {
    this.originPath = this.$route.query.originPath;
    this.courseId = this.$route.query.id;
    this.getPage();
  },
  computed: {},
  watch: {},
  methods: {
    rowClassName({row, rowIndex}) {
      // console.log(rowIndex)
      if (rowIndex % 2 == 0) {
        return 'grayLine'
      }
    },
    async getPage() {
      let { data } = await operateApi.fileDetailPage({
        courseId: this.courseId,
        ...this.pageInfo,
      });
      this.list = data.records;
      this.total = data.total
    },
    // 下载附件
    downLoadFile(it) {
      teacherApi.downloadFile(it.fileName, it);
    },
    async fileCheck(v, it) {
      let data = await operateApi.fileCheck({
        id: it.id,
        state: v,
      });
      if ((data.code = 10200)) {
        v == 1 ? this.$message.success("通过成功") :  this.$message.success("驳回成功");
      }
      this.getPage();
    },
    sizeChange(val) {
      this.pageInfo.size = val;
      this.getPage();
    },
    currentChange(val) {
      this.pageInfo.current = val;
      this.getPage();
    },
  },
  created() {},
};
</script>
<style >
.el-table .grayLine{
  background: #eee;
}
</style>